<!--read.php 的顶部和底部操作区-->
<script setup>
import {setupMapState} from "@/assets/js/vuexUtils";
import ReadLink from "@/components/common/link/ReadLink.vue";
import Pagination from "@/components/common/Pagination.vue";
import {PostAction} from "@ginstone/nga-api/dist/src/enums/PostAction";
import {toRefs} from "vue";
import {useStore} from "vuex";
import {ElMessageBox} from "element-plus";
import {useRoute, useRouter} from "vue-router";
import BreadcrumbNav from "@/components/read/BreadcrumbNav.vue";
import FavorFolderPopover from "@/components/common/popover/FavorFolderPopover.vue";
import SearchPopover from "@/components/common/popover/SearchPopover.vue";
import {ForumType} from "@ginstone/nga-api/dist/src/enums/ForumType";

const props = defineProps({
  // 回复响应
  data: Object,
  // 热键配置
  hotKey: Array,
  // 导航栏位置
  placement: {
    type: String,
    default: 'top',
    validator(value) {
      return ['top', 'bottom'].includes(value)
    }
  },
})

const {data} = toRefs(props)
const route = useRoute();
const router = useRouter();
defineEmits(["refresh"])

const {currentUid} = setupMapState("Account", ['currentUid']);

const getReplyRoute = () => {
  const name = PostAction.REPLY;
  const query = {account: currentUid.value}
  const tid = data.value.topicInfo.topicId
  return {name, params: {tid, pid: 0}, query}
}

const store = useStore();
const showDialog = (name, data) => store.commit("Dialog/showDialog", {name, data})

const jumpFloor = () => {
  if (!data.value.hasOwnProperty('pageData')) {
    return
  }
  const {total} = data.value.pageData
  ElMessageBox.prompt(undefined, `请输入目标楼层 1 - ${total}`, {
    inputValue: total,
    inputType: "number",
    inputValidator: (value) => {
      if (!value) {
        return false;
      }
      return value >= 1 && value <= total;
    },
    inputErrorMessage: '只能填写指定范围的楼层号',
  }).then(({value}) => {
    // 计算目标页数
    const size = 20;
    const page = Math.floor(value / size) + 1
    const query = {...route.query, page}
    const hash = "#F" + value
    router.push({query, hash})
    // router.push({name, params: {id}, query: {page: value, account: currentUid.value}})
  }).catch(r => {
    console.log(r)
  })
}

const getSearchForums = (data) => {
  const {forum, topicInfo} = data
  // console.log({forum, topicInfo})
  const arr = []
  const {colTid, colTitle, forumId, forumName} = forum
  // 当前版面
  arr.push({id: forumId, name: forumName, type: ForumType.FORUM})
  // 如果存在合集，加入
  if (colTid) {
    arr.push({id: colTid, name: colTitle, type: ForumType.COLLECTION})
  } else if (topicInfo && topicInfo.colTopic) {
    const {topicId, title} = topicInfo.colTopic
    arr.push({id: topicId, name: title, type: ForumType.COLLECTION})
  }
  return arr
}
</script>

<template>
  <div v-if="data.pageData">
    <div v-if="placement==='top'">
      <BreadcrumbNav :data="data"/>
    </div>

    <div>
      <!--翻页器-->
      <div class="operation-block" style="text-align: left;width: 70%;">
        <pagination :data="data.pageData" @refresh="$emit('refresh')"/>
        <!--跳转指定楼层-->
        <el-button v-if="data.pageData.totalPage>1" size="small" type="primary" @click="jumpFloor">跳楼</el-button>
      </div>
      <!--操作区-->
      <div class="operation-block" style="text-align: right;width: 30%;">
        <read-link v-if="!$route.query.authorId" :author-id="Number(currentUid)" :page="1" :tid="data.topicInfo.topicId" class="ops-link">
          只看我
        </read-link>
        <el-button-group size="small" type="success">
          <el-button v-if="data && data.hasOwnProperty('blockedReplies') && data.blockedReplies.length>0"
                     type="primary"
                     @click="showDialog('blockedReplies',data)">
            已屏蔽({{ data.blockedReplies.length }})
          </el-button>
          <!--搜索-->
          <search-popover :data="getSearchForums(data)">
            <el-button type="primary">搜索</el-button>
          </search-popover>
          <!--查询声望阈值-->
          <el-button v-if="data.forum && data.forum.customLevels" @click="showDialog('reputation',data.forum.customLevels)">声望</el-button>
          <el-button v-if="hotKey" @click="showDialog('hotKey',hotKey)">热键</el-button>
          <!--操作区: 收藏-->
          <favor-folder-popover :pid="data.topicInfo.replyId" :tid="data.topicInfo.topicId">
            <el-button>收藏</el-button>
          </favor-folder-popover>
          <el-button @click="$emit('refresh')">刷新</el-button>
          <!--回复-->
          <el-button @click="$router.push(getReplyRoute())">回复</el-button>
        </el-button-group>
      </div>
    </div>

    <div v-if="placement==='bottom'">
      <BreadcrumbNav :data="data"/>
    </div>
  </div>
</template>

<style scoped>
.operation-block {
  display: inline-block;
}
</style>